import { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../store";
// 引入动作创建函数
//    set_goods 是同步动作创建函数
//    fetchGoods 是异步动作创建函数
import { set_goods, fetchGoods } from "../stores/cart";

function Hello() {
  const goods = useAppSelector((state) => state.cart.goods);
  const loading = useAppSelector((state) => state.cart.loading);
  const dispatch = useAppDispatch();

  useEffect(() => {
    // dispatch一个异步动作
    dispatch(fetchGoods());
  }, []);

  // useEffect(() => {
  //   // 定义获取 goods 的函数
  //   function getGoods() {
  //     fetch("http://localhost:3000/goods")
  //       .then((response) => response.json())
  //       .then((result) => {
  //         // result 是接口返回的数据，将数据写入到仓库中即可。

  //         console.log(result);

  //         // 调用dispatch
  //         dispatch(set_goods(result));
  //       });
  //   }

  //   // 默认调用一次
  //   getGoods();
  // }, []);

  return (
    <div>
      <h3>Hello</h3>
      <button onClick={() => dispatch(fetchGoods())}>调用接口</button>
      {loading ? (
        <div>加载中...</div>
      ) : (
        <ul>
          {goods.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Hello;
